<script setup lang="ts">
import { ref, watch } from 'vue'
import { jumpToBlank } from '@/utils'
import useQuickJumpStore from '@/store/quick-jump'
import { storeToRefs } from 'pinia'
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons-vue'
import type { Rule } from 'ant-design-vue/es/form'
import type { FormInstance } from 'ant-design-vue'
import type { QuickJump } from '@/store/types'

const $store = useQuickJumpStore()
const { quickJumpList } = storeToRefs($store)
const { deleteQuickJump, setQuickJump, addQuickJump } = $store

const visible = ref<boolean>(false)
watch(visible, nv => {
  if (!nv) {
    resetForm()
    isShowAddDrawer.value = false
  }
})
const openModal = () => {
  visible.value = true
}
const closeModal = () => {
  visible.value = false
}

const handleQuickJump = (url: string) => {
  jumpToBlank(url)
}

const handleItemSetting = (data: QuickJump) => {
  isAdd = false
  Object.assign(addQuickJumpForm.value, data)
  isShowAddDrawer.value = true
}
const handleItemDelete = (data: QuickJump) => {
  deleteQuickJump(data)
}

const formRef = ref<FormInstance>()
const addQuickJumpForm = ref<QuickJump>({
  id: undefined,
  url: '',
  target: '',
  title: ''
})
const rules: Record<string, Rule[]> = {
  target: [{ required: true, message: '请输入链接名' }]
}
const resetForm = () => {
  Object.assign(addQuickJumpForm.value, {
    id: undefined,
    url: '',
    target: '',
    title: ''
  })
}

let isAdd: boolean = false
const isShowAddDrawer = ref<boolean>(false)
const handleAdd = () => {
  resetForm()
  isAdd = true
  isShowAddDrawer.value = true
}
const handleCancelAdd = () => {
  // formRef.value?.resetFields()
  isShowAddDrawer.value = false
}
const handleAddOrSet = () => {
  formRef.value?.validateFields().then(() => {
    if (!isAdd) {
      setQuickJump(addQuickJumpForm.value)
    } else {
      addQuickJump(addQuickJumpForm.value)
    }
    resetForm()
    isShowAddDrawer.value = false
  })
}

defineExpose({
  openModal,
  closeModal
})
</script>

<template>
  <a-modal
    wrapClassName="add-modal-class"
    :bodyStyle="{ padding: '24px 0 0 0' }"
    v-model:visible="visible"
    title="快捷导航"
    destroyOnClose
  >
    <a-list itemLayout="horizontal" :data-source="quickJumpList">
      <template #renderItem="{ item }">
        <a-list-item :key="item.id" @click="handleQuickJump(item.target)">
          <div class="list-content">
            <div class="list-content-item">
              <img :src="item.url" />
              <div>{{ item.title }}</div>
            </div>
            <a-popover trigger="hover" placement="bottom">
              <template #content>
                <div class="setting-content">
                  <a-button @click="handleItemSetting(item)">修改</a-button>
                  <a-button @click="handleItemDelete(item)">删除</a-button>
                </div>
              </template>
              <a-button class="setting-btn" type="text" @click.stop>
                <ellipsis-outlined />
              </a-button>
            </a-popover>
          </div>
        </a-list-item>
      </template>
    </a-list>
    <div v-if="isShowAddDrawer">
      <a-divider />
      <a-form
        ref="formRef"
        :model="addQuickJumpForm"
        :rules="rules"
        :labelCol="{ span: 4 }"
        labelAlign="left"
      >
        <a-form-item label="图标链接" name="url">
          <a-input
            v-model:value="addQuickJumpForm.url"
            placeholder="请输入图标链接"
          />
        </a-form-item>
        <a-form-item label="链接" name="target">
          <a-input
            v-model:value="addQuickJumpForm.target"
            placeholder="请输入链接"
          />
        </a-form-item>
        <a-form-item label="链接名" name="title">
          <a-input
            v-model:value="addQuickJumpForm.title"
            placeholder="请输入链接名"
          />
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <div class="modal-footer">
        <a-button
          v-if="quickJumpList.length < 10"
          v-show="!isShowAddDrawer"
          class="plus-btn"
          type="primary"
          @click="handleAdd"
        >
          <plus-outlined />
          添加
        </a-button>
        <div v-show="isShowAddDrawer">
          <a-button type="text" @click="handleCancelAdd"> 取消 </a-button>
          <a-button type="primary" @click="handleAddOrSet"> 确定 </a-button>
        </div>
      </div>
    </template>
  </a-modal>
</template>

<style lang="scss" scoped>
.add-modal-class {
  .ant-list {
    @apply max-h-80 px-4 overflow-scroll;
  }
  .ant-list-item {
    @apply p-2 mb-1 hover:bg-blue-100 bg-opacity-40 transition duration-150 ease-in cursor-pointer;
    border-bottom: none;
    &:hover {
      color: #3b82f6;
    }
  }
  .list-content {
    @apply w-full flex justify-between items-center font-mono subpixel-antialiased;
    .list-content-item {
      @apply flex items-center;
      img {
        @apply w-4 h-4;
      }
      div {
        @apply ml-2;
      }
    }
  }
  .ant-divider {
    @apply my-3;
  }
  .ant-form {
    @apply p-4;
  }
  .ant-btn-text:focus {
    background-color: transparent !important;
  }
  .setting-btn {
    @apply flex items-center border-none shadow-none text-gray-700;
    &:hover {
      background-color: unset !important;
    }
  }
  .modal-footer {
    @apply flex justify-end;
    .plus-btn {
      @apply flex items-center;
    }
  }
}
.setting-content {
  @apply flex flex-col p-0;
  .ant-btn {
    @apply border-none;
  }
}
</style>
